<!doctype html>
<html lang="zh-CN">  <!--语言设置-->
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">   <!--字符设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Hello, world!</title>
    <style>
        html{
          height: 100%;
        }
  
        body{
          height: 100%;
        }
        
  
        #app{
          width: 100%;
          height: 100%;
  
          min-width: 900px;
          min-height: 500px;
  
          overflow: auto;/*产生滚动条*/
  
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
  
        .lead{
          width: 100%;
          height: 15%;
  
          box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px;
        }
  
        .style{
          width: 500px;
          height: 500px;
          box-shadow: rgba(0, 0, 0, 0.87) 2px 2px 5px;
          border-radius: 250px;
  
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .style1{
          width: 600px;
          height: 600px;
          box-shadow: rgba(0, 0, 0, 0.87) 2px 2px 5px;
          border-radius: 300px;
  
          display: flex;
          justify-content: center;
          align-items: center;
        }
       
  
  
      </style>
  </head>
  <body>
    <div id = "app" >

        <form>
            <div style="font-size: 25px;text-align: center;margin: bottom 15px; ">
                图书管理系统
            </div>
            <div class="form-group">
              <label for="u_id">账号</label>
              <input type="text" class="form-control" id="u_id" v-model="user.u_id" >
              
            </div>
            <div class="form-group">
                <label for="u_pwd">密码</label>
                <input type="text" class="form-control" id="u_pwd" v-model="user.u_pwd" >
                
            
            <button type="button" class="btn btn-primary" @click="login">登录</button>
          </form>

       
       

    </div>
   
    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>
    <script>

        //定义vue应用配置
        const app = {
            //data用来定义数据
            data(){
                return{
                   //定义登录数据
                   user:{
                       u_id:'',
                       u_pwd:''
                   },
                   loadIdx:null,
                };
            },

            //定义方法
            methods:{
                //登录
                login(){
                    //将登录数据发送至服务器
                    this.loadIdx = layer.load();
                    myAxios.post('/login',this.user)
                           .then(res=>{
                               layer.close(this.loadIdx);
                               if(res.data.success){
                                   layer.msg('登录成功！', {icon: 1},()=>{
                                   window.location.href = 'home.html';
                                   });
                                }else{
                                    layer.msg(res.data.message, {icon: 2});
                               }
                           })
                           .catch(err=>{
                            layer.close(this.loadIdx);
                            layer.msg('系统错误！', {icon: 2});
                           });

                }
            },
            //定义回调方法：mounted，该方法在页面渲染完成立即执行
            mounted(){
               
            }
        };
        Vue.createApp(app).mount('#app') 
    </script>
  </body>
</html>